<template>
  <div class="collect">
    <div class="bar">
      <div style="height: 3rem"></div>
      <van-nav-bar :fixed="true" title="我的收藏" left-text="返回" left-arrow @click-left="returnPage" @click-right="editArticleInfo">
        <template #right>
          <van-icon name="add-o" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="articleCell">
      <van-list :immediate-check="false">
        <ArticleComponent :articles="articles" :type="0"></ArticleComponent>
      </van-list>
    </div>
  </div>
</template>

<script>
import ArticleComponent from '@/components/ArticleComponent.vue'
import requestApi from '@/utils/request.js'
import { Toast } from 'vant'

export default {
  name: 'CollectComponent',
  components: { ArticleComponent },
  data() {
    return {
      articles: [
        {
          id: 1,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        },
        {
          id: 2,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        },
        {
          id: 3,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        },
        {
          id: 4,
          articleDesc:
            'Vue.js 是一个流行的 JavaScript 前端框架，它采用了一种响应式的数据绑定机制，使得应用状态的管理变得简单而直观。Vue.js 的核心思想是将应用程序分解成组件，每个组件都拥有自己的状态和行为，并且可以嵌套在其他组件中。Vue.js 还提供了丰富的工具和插件，使得开发者可以更轻松地构建交互式用户界面。',
          title: '文章标题',
          thumb: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          author: '张三',
          tagNames: [
            {
              id: 1,
              tagName: 'Java'
            },
            {
              id: 2,
              tagName: 'Spring'
            }
          ],
          commentNum: 10,
          releaseData: '2023-08-02'
        }
      ]
    }
  },
  methods: {
    returnPage() {
      this.$router.back()
    },
    // 新增文章
    editArticleInfo() {
      this.$router.push('/edit')
    },
    getArticles(then) {
      const token = localStorage.getItem('my_token')
      requestApi({
        method: 'get',
        url: 'getCollect',
        headers: {
          // 设置请求头
          Authorization: token
        }
      })
        .then(function (response) {
          const req = response.data
          if (req.code === 0) {
            then.articles = req.data
          } else {
            Toast.fail(req.msg)
          }
        })
        .catch(function (error) {
          console.log(error)
          Toast.fail('加载收藏错误')
        })
    }
  },
  created() {
    this.getArticles(this)
  }
}
</script>

<style lang="less" scoped></style>
